<template>
<<<<<<< HEAD
    <div>
        <AppTopNav />
        <MyHeader />
        <div class="head">
            <div class="w">
                <div class="xtx-cart-page">
    <div class="container">
        <el-row>
            <el-button type="warning" class="BttonEl" @click="$router.push('/')" >首页</el-button>
        </el-row>
      <div class="cart">
        <table class="Tablie">
          <thead>
            <tr>
              <th width="120"><XtxCheckbox><el-checkbox v-model="checked1" label="全选" size="large" /></XtxCheckbox></th>
              <th width="400">商品信息</th>
              <th width="220">单价</th>
              <th width="180">数量</th>
              <th width="180">小计</th>
              <th width="140">操作</th>
            </tr>
          </thead>
          <!-- 有效商品 -->
          <tbody class="BigTb">
            <tr v-for="i in count" :key="i">
              <td class="Cheoboxb"><el-checkbox v-model="checked1"  size="large" /></td>
              <td class="Tobyt">
                <div class="goods">
                
                  <RouterLink to="/"><img src="https://yanxuan-item.nosdn.127.net/13ab302f8f2c954d873f03be36f8fb03.png" alt=""></RouterLink>
                  <div>
                    <p class="name ellipsis">和手足干裂说拜拜 ingrams手足皲裂修复霜</p>
                    <!-- 选择规格组件 -->
                  </div>
                </div>
              </td>
              <td class="tc">
                <p>&yen;200.00</p>
                <p><span class="red">比加入时降价&yen;20.00</span></p>
              </td>
              <td class="tc">
                <el-input-number size="small" v-model="num" :min="1" :max="10" @change="handleChange" />
              </td>
              <td class="tc"><p class="f16 red">&yen;200.00</p></td>
              <td class="tc">
                <p><a href="javascript:;">移入收藏夹</a></p>
                <p><a class="green" href="javascript:;">删除</a></p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 操作栏 -->
      <div class="action">
        <div class="batch">
          <XtxCheckbox><el-checkbox v-model="checked1" label="全选" size="large" /></XtxCheckbox>
          <a class="Ashan" href="javascript:;">批量删除</a>
           
        </div>
        <div class="total">
          应该付总额  :
          <span class="red">¥400</span>
            <el-button color="#b4a078" class="SpanEl" type="primary"><a class="Xia" href="#/order">下单</a></el-button>
        </div>
      </div>  
    </div>
  </div>
=======
  <div>
    <AppTopNav />
    <MyHeader />
    <div class="head">
      <div class="w">
        <div class="xtx-cart-page">
          <div class="container">
            <el-row>
              <el-button
                type="warning"
                class="BttonEl"
                @click="$router.push('/')"
                >首页</el-button
              >
            </el-row>
            <div class="cart">
              <table class="Tablie">
                <thead>
                  <tr>
                    <th width="120">
                      <XtxCheckbox
                        ><el-checkbox
                          v-model="checkedAll"
                          label="全选"
                          size="large"
                      /></XtxCheckbox>
                    </th>
                    <th width="400">商品信息</th>
                    <th width="220">单价</th>
                    <th width="180">数量</th>
                    <th width="180">小计</th>
                    <th width="140">操作</th>
                  </tr>
                </thead>
                <!-- 有效商品 -->
                <tbody class="BigTb">
                  <tr v-for="(item, i) in list" :key="i">
                    <td class="Cheoboxb">
                      <el-checkbox v-model="item.checked" size="large" />
                    </td>
                    <td class="Tobyt">
                      <div class="goods">
                        <RouterLink to="/"
                          ><img :src="item.img" alt=""
                        /></RouterLink>
                        <div>
                          <p class="name ellipsis">
                            和手足干裂说拜拜 ingrams手足皲裂修复霜
                          </p>
                          <!-- 选择规格组件 -->
                        </div>
                      </div>
                    </td>
                    <td class="tc">
                      <p>&yen;{{ item.price - 20 }}</p>
                      <p><span class="red">比加入时降价&yen;20.00</span></p>
                    </td>
                    <td class="tc">
                      <el-input-number
                        size="small"
                        v-model="item.sum"
                        :min="1"
                        :max="10"
                        @change="handleChange"
                      />
                    </td>
                    <td class="tc">
                      <p class="f16 red">
                        &yen;{{ (item.price - 20) * item.sum }}
                      </p>
                    </td>
                    <td class="tc">
                      <p><a href="javascript:;">移入收藏夹</a></p>
<<<<<<< HEAD
                      <p><a class="green" href="javascript:;" @click="del(index)">删除</a></p>
=======
                      <p>
                        <a
                          class="green"
                          href="javascript:;"
                          @click="shanchu(item.id)"
                          >删除</a
                        >
                      </p>
>>>>>>> 215f03e587d8f17161ec20bf613a5cff5f45ed02
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- 操作栏 -->
            <div class="action">
              <div class="batch">
                <XtxCheckbox
                  ><el-checkbox v-model="checkedAll" label="全选" size="large"
                /></XtxCheckbox>
                <a class="Ashan" href="javascript:;">批量删除</a>
              </div>
              <div class="total">
                应该付总额 :
                <span class="red">¥{{ qqqq }}</span>
                <el-button color="#b4a078" class="SpanEl" type="primary"
                  ><a class="Xia" href="#/order" @click="xiadan(wwww)"
                    >下单</a
                  ></el-button
                >
              </div>
>>>>>>> 2deb3c18cf296e1f54427e5a556197793ffc65f3
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
<<<<<<< HEAD
import AppTopNav from '../../components/AppTopNav.vue'
import MyHeader from '../../components/MyHeader.vue'
import {getItem} from '@/utils/auth'
import { ref } from '@vue/reactivity';
import { computed } from 'vue';
=======
import AppTopNav from "../../components/AppTopNav.vue";
import MyHeader from "../../components/MyHeader.vue";
import { useStore } from "vuex"; // 引入useStore 方法
import { ref, computed, onMounted, watch } from "vue";
>>>>>>> 2deb3c18cf296e1f54427e5a556197793ffc65f3
components: {
  AppTopNav, MyHeader;
}
const num = ref(0);
// let arr = ref([])
const store = useStore(); // 该方法用于返回store 实例
let list = ref(store.state.gouwuche.item);

let wwww = computed(() =>{
  return list.value.filter((item) => item.checked === true)
})

// 计算属性 总价格
let qqqq = computed(() => {
  return list.value
    .filter((item) => item.checked === true)
    .reduce((prov, item) => {
      return (prov += (item.price - 20) * item.sum);
    }, 0);
});

let count = ref(0)
count.value = getItem('payCount')

// 删除
const shanchu = (id) => {
  list.value = list.value.filter((item) => item.id !== id);
  store.commit("gouwuche/shanchu", id);
  // list.value = store.state.gouwuche.item;
  // store.commit('gouwuche/sum', num)
};
// 全选
let checkedAll = computed({
  get: () => {
    return list.value.every((item) => item.checked === true);
  },
  set: (value) => {
    list.value.forEach((element) => {
      element.checked = value;
    });
  },
});

const xiadan = (i) => {
  store.commit('gouwuche/xiadan', i)
};

onMounted(() => {});
</script>



<<<<<<< HEAD
    }
    //删除
    function del(index){
      list.value.splice(index,1)
    }
    //全选
    function Checkd() {
      list.value.map(item => item.checked = !checkedAll.value)
    }
  //  反选
    function checked(){
      const aaa = list.value.every(item => item.checked === true)
      checkedAll.value = !aaa
    }
    onMounted(() => {
      shuju()
    })

    return {
      shuju, list, handleChange, checkedAll,Checkd,checked,del
    }
  },
  components: {
    AppTopNav, MyHeader
  }
}
=======

>>>>>>> 215f03e587d8f17161ec20bf613a5cff5f45ed02



<style scoped lang='less'>
.tc {
  text-align: center;

  .xtx-numbox {
    margin: 0 auto;
    width: 120px;
  }
}

.red {
  color: @priceColor;
}

.green {
  color: @xtxColor;
}

.f16 {
  font-size: 16px;
}

.goods {
  display: flex;
  align-items: center;

  img {
    width: 100px;
    height: 100px;
  }

  >div {
    width: 280px;
    font-size: 16px;
    padding-left: 10px;

    .attr {
      font-size: 14px;
      color: #999;
    }
  }
}

.action {
  display: flex;
  background-color: #f5f5f5;
  margin-top: 20px;
  height: 80px;
  align-items: center;
  font-size: 16px;
  justify-content: space-between;
  padding: 0px 0px 0px 30px;
  border: 1px solid #ddd;

  .xtx-checkbox {
    color: #999;
  }

  .batch {
    a {
      margin-left: 25px;
    }
  }

  .red {
    font-size: 18px;
    margin-right: 20px;
    font-weight: bold;
  }
  .SpanEl {
    padding-left: 30px;
    border-radius: 0;
    width: 150px;
    height: 80px;
    margin-top: 0px;
    margin-right: 0px;
  }
  .Xia {
    color: #fff;
    font-size: 18px;
    line-height: 80px;
    font-weight: normal;
  }
}

.tit {
  color: #666;
  font-size: 16px;
  font-weight: normal;
  line-height: 50px;
}

.xtx-cart-page {
  .BigTb {
    .Cheoboxb {
      text-align: center;
      align-items: center;
    }
  }
  .BttonEl {
    margin-bottom: 5px;
  }

  .cart {
    background: #fff;
    color: #666;

    table {
      border-spacing: 0;
      border-collapse: collapse;
      line-height: 24px;
      border: 1px solid #ddd;
      th {
        margin-top: 5px;
        background-color: #f5f5f5;
        padding: 12px 0px;
        border-bottom: 1px solid #f5f5f5;

        .Tobyt {
          padding: 0px 20px;
          background-color: #bbbb00;
          border-bottom: 1px solid #f5f5f5;
        }

        &:first-child {
          text-align: left;
          padding-left: 30px;
          color: #999;
        }
      }

      th {
        font-size: 16px;
        font-weight: normal;
        line-height: 50px;
      }
    }
  }
}
</style>